<template>
    <div>
        <el-card>
        <!--查询添加-->
        <el-row>
              <el-col :span="8">
                <el-input placeholder="请输入内容" clearable v-model="queryInfo.queryString" class="input-with-select" @clear="findPage">
                  <el-button slot="append" icon="el-icon-search" @click="findPage"/>
                </el-input>
              </el-col>
            </el-row>
          <!--列表-->
        <el-table :data="tableList" stripe  :tree-props="{children: 'children', hasChildren: 'hasChildren'}"  row-key="id" >
            <el-table-column type="expand">
                    <template slot-scope="scope">
                        <div v-html="scope.row.content" v-hljs />
                    </template>
              </el-table-column>
              <el-table-column type="index" label="序号" />
              <el-table-column prop="title" label="标题" show-overflow-tooltip/>
              <el-table-column prop="createTime" label="创建时间" />
              <el-table-column prop="nickName" label="创建人" />
              <el-table-column label="审核状态">
                        <template slot-scope="scope">
                            <el-switch @change="updateStatus(scope.row)" v-model="scope.row.status" />
                        </template>
              </el-table-column>
          <el-table-column fixed="right" label="操作" width="180">
            <template slot-scope="scope">
              <el-button type="danger" @click="deleteById(scope.row.id)"   size="small"  icon="el-icon-delete" circle/>
            </template>
          </el-table-column>
        </el-table>
          <!--底部分页条-->
        <el-pagination
          @size-change="handlePageSize"
          @current-change="handlePageNumber"
          :current-page="currentPage4"
          :page-sizes="[7, 25, 50, 100]"
          :page-size="queryInfo.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"/>

          
        </el-card>
    </div>
</template>

<script>
import {marked} from "marked";
export default {
    data(){
        return {
            queryInfo: {
            //页码
            pageNumber: 1,
            //页数
            pageSize: 7,
            //关键字
            queryString: ""
          },
            //表格数据
            tableList:[],
            //总记录数
            total: 0,
            currentPage4: 1,
            //弹窗标题
            title: null,
            //是否打开会话框
            open1: false,
            //表单数据
            form: {},
            toolbars: {
                bold: true, // 粗体
                italic: true, // 斜体
                header: true, // 标题
                underline: true, // 下划线
                quote: true, // 引用
                ul: true, // 有序列表
                link: true, // 链接
                imagelink: true, // 图片链接
                code: true, // code
                subfield: true, // 是否需要分栏
                fullscreen: true, // 全屏编辑
                /* 1.3.5 */
                undo: true, // 上一步
                trash: true, // 清空
                /* 1.4.2 */
                navigation: true // 导航目录
            },

            rules:{
                title:[
                    { required: true, message: '标题不能为空', trigger: 'blur' },
                    { max:30,message:'标题最大不能超过30' ,trigger: 'blur'}
                ],
                content:[
                    { required: true, message: '内容不能为空', trigger: 'blur' },
                ]

            }
        }
    },

    methods:{

        uploadImage(pos,$e){
            
            let formdata = new FormData();
            formdata.append('file',$e);
            this.$ajax.post("/tool/upload",formdata).then(res=>{
              console.log(pos,this.$qiniu + res.data.data);
                this.$refs.md.$img2Url(pos, this.$qiniu + res.data.data)
            })
        },
        findPage(){
          
            this.$ajax.post("/news/findPageCheck", this.queryInfo).then((res)=>{
                this.tableList = res.data.rows.filter(item=>{
                    if(item.content  && item.content != '')
                    item.remark = item.content;
                    item.content = marked(item.content)
                    return true;
                });
                this.total = res.data.total;
                console.log(this.tableList);
            });
        },

    //页面改变事件
    handlePageNumber(newPageNumber){
      //将分页的新数据的参数传递给后端查询
      this.queryInfo.pageNumber = newPageNumber;
      //调分页方法
      this.findPage();
    },

    handlePageSize(newPageSize){
      this.queryInfo.pageSize = newPageSize;
      this.findPage();
    },


    update(row){
        this.title = "修改新闻资讯";
        if (row.path === '/'){
            this.isChildrenMenu = false;
        }else {
            //禁用菜单级别的选择
            this.disMenuSelect = true;
        }
          this.form = row;
          this.form.content = row.remark;
          this.open1 = true;
    },
    //删除权限信息
    deleteById(id){
      this.$confirm('您将永久删除id是{' + id +' }的新闻资讯, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        //调用后端删除权限接口
        this.$ajax.delete(`/news/delete/${id}`).then(res => {
          this.$message.success(res.data.message);
          this.queryInfo.pageNumber = 1;
          this.findPage();
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

    
    /*改变审核的状态*/
    updateStatus(row){
            this.$ajax.put(`/news/updateStatus/${row.id}`).then((res)=>{
                this.$message.success("状态更新成功！")
            })
        },

    },

    created(){
        this.findPage();
    }
}
</script>

<style>

</style>